.rangeWrapper {
  margin: 30px 30px 26px;
  padding: 12px 0;
}

.resetButton {
  position: absolute;
  right: 30px;
  top: 80px;
  z-index: 10;
  text-decoration: underline;
  color: var(--euiTextSubduedColor);
  &:hover,
  &:focus {
    color: var(--euiTextColor);
  }
  font: normal normal 500 13px/18px Graphik, sans-serif;
}

.slider {
  position: relative;
  width: 100%;
}

.sliderTrack,
.sliderRange,
.sliderLeftValue,
.sliderRightValue {
  position: absolute;
}

.sliderTrack {
  background-color: var(--separatorColor);
  width: 100%;
  height: 1px;
  margin-top: 2px;
  z-index: 1;
}

.rangeWrapper .sliderRange {
  height: 1px;
  background-color: var(--euiColorPrimary);
  z-index: 2;
  transform: translateY(2px);

  &:before {
    content: '';
    width: 1px;
    height: 6px;
    position: absolute;
    top: -5px;
    left: -1px;
    background-color: var(--euiColorPrimary);
  }

  &:after {
    content: '';
    width: 1px;
    height: 6px;
    position: absolute;
    right: -1px;
    background-color: var(--euiColorPrimary);
  }
}

.rangeWrapper:hover .sliderRange:not(.disabled) {
  height: 5px;
  transform: translateY(0px);

  &:before {
    width: 2px;
    height: 12px;
    top: -7px;
  }

  &:after {
    width: 2px;
    height: 12px;
  }
}

.sliderLeftValue,
.sliderRightValue {
  width: max-content;
  color: var(--euiColorMediumShade);
  font: normal normal normal 12px/18px Graphik, sans-serif;
  margin-top: 8px;
}

.sliderLeftValue {
  left: 0;
  margin-top: -25px;
}

.rangeWrapper:hover .sliderLeftValue:not(.disabled) {
  margin-top: -23px;
}

.rangeWrapper:hover .sliderRightValue:not(.disabled) {
  margin-top: 10px;
}

.sliderLeftValue.leftPosition {
  transform: translateX(-100%);
}

.sliderRightValue.rightPosition {
  transform: translateX(100%);
}

.sliderRightValue {
  right: -4px;
}

.mockRange {
  left: 30px;
  width: calc(100% - 56px);
}

.thumb,
.thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.thumb {
  pointer-events: none;
  position: absolute;
  height: 0;
  width: calc(100% - 60px);
  outline: none;
}

.thumbZindex3 {
  z-index: 3;
}

.thumbZindex4 {
  z-index: 4;
}

.thumb::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  cursor: ew-resize;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
  background: transparent;
}

.thumb::-moz-range-thumb:disabled {
  cursor: auto;
}

.thumbZindex3::-moz-range-thumb {
  transform: translate(-18px, -4px);
}

.thumbZindex4::-moz-range-thumb {
  transform: translate(-20px, 8px) rotate(180deg);
}

input[type='range']::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  cursor: ew-resize;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
  background: transparent;
}

input[type='range'][disabled]::-webkit-slider-thumb {
  cursor: auto;
}

input[type='range']:first-child::-webkit-slider-thumb {
  transform: translate(-18px, -4px);
}

input[type='range']:last-of-type::-webkit-slider-thumb {
  transform: translate(-20px, 8px) rotate(180deg);
}
